<template>
  <div class="dashboard-container">
    <div class="questions-container">
      <el-card  shadow="always">
        <div class="btn_wrapper">
          <span style="color: pink; font-size: 12px;">说明：目前支持学科和关键字条件筛选</span>
          <el-button size="small" type="success" @click="$router.push('/questions/new')">
            <i class="el-icon-edit"></i>
            <span>新增试题</span>
          </el-button>
        </div>
      <el-form ref="elForm" :model="form" label-width="80px">
        <el-row>
          <el-col :span="6">
           <el-form-item label="学科" size="small">
              <el-select  v-model="form.subjectID" placeholder="请选择" style="width: 100%;" size="small" @visible-change="handleGetSubjectSimpleList">
                 <el-option
                  v-for="item in subjectSimpleList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录" size="small">
              <el-select v-model="form.catalogID" placeholder="请选择" style="width: 100%;" size="small" @visible-change="handleDirectorySimpleList">
                <el-option
                  v-for="item in directorySimpleList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签" size="small">
              <el-select v-model="form.tags" placeholder="请选择" style="width: 100%;" size="small" @visible-change="handleTagSimpleList">
                <el-option
                  v-for="item in tagSimpleList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
             <el-form-item label="关键字" size="small">
              <el-input v-model="form.keyword" placeholder="根据题干搜索"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
           <el-form-item label="试题类型" size="small">
              <el-select v-model="form.questionType" placeholder="请选择" style="width: 100%;" size="small">
                 <el-option
                  v-for="item in questionType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度" size="small">
              <el-select v-model="form.difficulty" placeholder="请选择" style="width: 100%;" size="small">
                <el-option
                  v-for="item in difficulty"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向" size="small">
              <el-select v-model="form.direction" placeholder="请选择" style="width: 100%;" size="small">
                <el-option
                  v-for="item in direction"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
             <el-form-item label="录入人" size="small">
              <el-select v-model="form.creatorID" placeholder="请选择" style="width: 100%;" size="small" @visible-change="handleUserSimpleList">
                <el-option
                  v-for="item in userSimpleList"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
           <el-form-item label="题目备注" size="small">
              <el-input v-model="form.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称" size="small">
              <el-input v-model="form.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市" size="small">
              <el-select style="width: 48%; margin-right: 2%;" v-model="form.province" placeholder="请选择" size="small"  @change="changeProvinces">
                <el-option
                  v-for="item in showprovinces"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
              <el-select style="width: 50%;" v-model="form.city" placeholder="请选择" size="small" >
                <el-option
                  v-for="item in showcitys"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
             <el-form-item style="text-align: right;" size="small">
              <el-button size="small" @click="resetForm">清除</el-button>
              <el-button size="small" type="primary" @click="getQuestionsList" >搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-alert
        :title="totalTip"
        type="info"
        :closable="false"
        style="margin-bottom: 15px;"
        show-icon>
      </el-alert>

      <el-table
        :data="questionsList"
        style="width: 100%"
        :header-cell-style="{
            'background-color': '#fafafa',
            'border-bottom': '2px #e8e8e8 solid'
        }">
        <el-table-column
          prop="number"
          label="试题编号"
          width="120">
        </el-table-column>
        <el-table-column
          prop="subject"
          label="学科"
          min-width="0">
        </el-table-column>
        <el-table-column
          prop="catalog"
          label="目录"
          min-width="0">
        </el-table-column>
        <el-table-column
          prop="questionType"
          label="题型"
          min-width="0"
          :formatter="formatEmployment1">
        </el-table-column>
        <el-table-column
          prop="question"
          label="题干"
          width="280">
            <template #default="{ row }">
              {{ row.question | html2Text }}
            </template>
        </el-table-column>
        <el-table-column
          prop="addDate"
          label="录入时间"
          width="180">
            <template #default="{ row }">
              {{ row.addDate | formatDate('YYYY-MM-DD hh:mm:ss') }}
            </template>
        </el-table-column>
        <el-table-column
          prop="difficulty"
          label="难度"
          min-width="0"
          :formatter="formatEmployment2">
        </el-table-column>
        <el-table-column
          prop="creator"
          label="录入人"
          min-width="0">
        </el-table-column>
        <el-table-column
          label="操作"
          width="180">
          <template  #default="{ row }">
            <el-button type="primary" icon="el-icon-view"  plain circle  size="small" title="预览" @click="handleProview(row.id)"></el-button>
            <el-button type="success" icon="el-icon-edit" plain circle size="small" title="修改" @click="handleChange(row.id)"></el-button>
            <el-button type="danger" icon="el-icon-delete" plain circle size="small" title="删除" @click="handleRemove(row.id)"></el-button>
            <el-button type="warning" icon="el-icon-check" plain circle size="small" title="加入精选" @click="handleChoiceAdd(row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="form.pagesize"
        layout="prev, pager, next, sizes, jumper"
        :total="counts"
        background
        style="margin-top: 20px; text-align: right;">
      </el-pagination>
      </el-card>

      <questions-preview ref="questionPreview" :data="detailQuestion"></questions-preview>
      <!-- <el-dialog
        title="题目预览"
        :visible.sync="dialogVisible"
        width="900px"
        class="questions-preview">
          <el-row>
            <el-col :span="6">【题型】：{{viewtype}}</el-col>
            <el-col :span="6">【编号】：{{detailQuestion.id}}</el-col>
            <el-col :span="6">【难度】：{{viewdiffcuty}}</el-col>
            <el-col :span="6">【标签】：{{detailQuestion.tags}}</el-col>
          </el-row><el-row>
            <el-col :span="6">【学科】：{{detailQuestion.subjectName}}</el-col>
            <el-col :span="6">【目录】：{{detailQuestion.directoryName}}</el-col>
            <el-col :span="6">【方向】：{{detailQuestion.direction}}</el-col>
            <el-col :span="6"></el-col>
          </el-row>
          <hr>
          <div>
            【题干】：{{detailQuestion.question}}
          </div>
          <hr>
          <div>
            【参考答案】：<el-button size="small" type="danger" @click="getAnswer">视频答案预览</el-button>
          </div>
          <hr>
          <div>
            【答案解析】：{{detailQuestion.answer}}
          </div>
          <hr>
          <div>
            【题目备注】：{{detailQuestion.remarks}}
          </div>

        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">取消</el-button>
        </div>
      </el-dialog> -->
    </div>
  </div>
</template>

<script>

import { list as getQuestions, detail, remove, choiceAdd } from '@/api/hmmm/questions'
import { mapGetters, mapActions } from 'vuex'
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
import { provinces, citys } from '@/api/hmmm/citys'
import QuestionsPreview from '../components/questions-preview'
export default {
  name: 'Question',
  data () {
    return {
      form: {
        page: 1,
        pagesize: 5,
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null
      },
      questionsList: [],
      counts: 0,
      questionType,
      difficulty,
      direction,
      showprovinces: provinces(),
      showcitys: [],
      // dialogVisible: false,
      detailQuestion: {}
      // viewtype: '',
      // viewdiffcuty: ''
    }
  },
  components: {
    QuestionsPreview
  },
  computed: {
    ...mapGetters([
      'subjectSimpleList',
      'directorySimpleList',
      'tagSimpleList',
      'userSimpleList'
    ]),
    totalTip () {
      const total = `数据一共 ${this.counts} 条`
      return total
    }
  },
  created () {
    this.getQuestionsList()
  },
  methods: {
    ...mapActions('subjects', ['getSubjectSimpleList']),
    ...mapActions('directorys', ['getDirectorySimpleList']),
    ...mapActions('tags', ['getTagSimpleList']),
    ...mapActions('users', ['getUserSimpleList']),
    async getQuestionsList () {
      const { data } = await getQuestions(this.form)
      console.log(data)
      this.questionsList = data.items
      this.counts = data.counts
    },
    handleSizeChange (val) {
      this.form.pagesize = val
      this.form.page = 1
      this.getQuestionsList()
    },
    handleCurrentChange (val) {
      this.form.page = val
      this.getQuestionsList()
    },
    handleGetSubjectSimpleList () {
      if (this.subjectSimpleList.length === 0) {
        this.getSubjectSimpleList()
      }
    },
    handleDirectorySimpleList () {
      if (this.directorySimpleList.length === 0) {
        this.getDirectorySimpleList()
      }
    },
    handleTagSimpleList () {
      if (this.tagSimpleList.length === 0) {
        this.getTagSimpleList()
      }
    },
    handleUserSimpleList () {
      if (this.userSimpleList.length === 0) {
        this.getUserSimpleList()
      }
    },
    changeProvinces (item) {
      this.form.city = null
      this.showcitys = citys(item)
    },
    resetForm () {
      for (const key in this.form) {
        if (key !== 'page' && key !== 'pagesize') this.form[key] = null
      }
    },
    formatEmployment1 (row, column, cellValue, index) {
      // 运用枚举
      const obj = questionType.find(item => item.value === +cellValue) // 出错点
      return obj ? obj.label : '未知题型'
    },
    formatEmployment2 (row, column, cellValue, index) {
      // 运用枚举
      const obj = difficulty.find(item => item.value === +cellValue) // 出错点
      return obj ? obj.label : '未知难度'
    },
    handleChoiceAdd (id) {
      this.$confirm('此操作将该题目加入精选,是否继续?', '提示', { type: 'info' }).then(async () => {
        await choiceAdd({ id: id, choiceState: 1 })
        this.$message.success('加入精选成功!')
        // 小优化id
        if (this.questionsList.length === 1 && this.form.page > 1) {
          this.form.page--
        }
        this.getQuestionsList()
      })
    },
    handleRemove (id) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', { type: 'warning' }).then(async () => {
        await remove({ id })
        this.$message.success('删除成功')
        // 小优化id
        if (this.questionsList.length === 1 && this.form.page > 1) {
          this.form.page--
        }
        this.getQuestionsList()
      })
    },
    handleChange (id) {
      this.$router.push(`/questions/new/?id=${id}`)
    },
    async handleProview (id) {
      // this.dialogVisible = true
      const { data } = await detail({ id })
      console.log(data)
      this.detailQuestion = data
      // const type = questionType.find(item => item.value === +this.detailQuestion.questionType)
      // this.viewtype = type.label
      // const difftype = difficulty.find(item => item.value === +this.detailQuestion.difficulty)
      // this.viewdiffcuty = difftype.label
      this.$nextTick(() => {
        this.$refs.questionPreview.open()
      })
    }
    // getAnswer () {

    // }
  }

}
</script>

<style lang='scss' scoped>
.dashboard-container{
  .questions-container{
    margin: 10px 0;
    padding: 0 10px;
    .btn_wrapper{
      margin: 0 0 15px;
      display: flex;
      justify-content: space-between;
    }
  }
  ::v-deep .el-pagination__jump {
    margin-left: 0;
  }
  // .questions-preview{
  //   .dialog-footer{
  //   text-align: right;
  //   }
  //   .el-row {
  //     padding: 10px;
  //   }
  // }

}

</style>
